{extend name="base" /}

{block name="title"}JULI-PWOER{/block}


{block name="content"}
<!-- 轮播图 -->
<section class="main_slider_area">
    <div class="main_slider">
        {volist name='banner' id='item'}
        <div class="slider_item" style="background-image: url('{$item.img}');">
            <div class="overlay_bg one"></div>
            <div class="container">
                <div class="slider_text slider_text_four">
                    <h2 data-animation="fadeInUp" data-delay="0.1s">
                        {$item.title}
                    </h2>
                    <h3 data-animation="fadeInUp" data-delay="0.2s">
                        {$item.desc}
                    </h3>
                    <div class="slider_btn">
                        <a href="#" class="theme_btn" data-animation="fadeInUp" data-delay="0.5s">查看更多</a>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>
    <div class="slider_nav">
        <i class="fas fa-angle-left left_arrow"></i>
        <i class="fas fa-angle-right right_arrow"></i>
    </div>
</section>
<!-- 轮播图 -->
<!-- 介绍 -->
<section class="about_area_two sec_paded" style="background-image: url({$home_img});
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: scroll;">
    <div class="container-xxl">
        <div class="row align-items-center ">
            <div class="col-lg-9 ">
                <div class="blog_item">
                    <div class="post_content" style="padding-right: 35px;padding-left: 35px;">
                        <div class="h_post_info">
                            <h2>
                                {$home_title}
                            </h2>
                            <h2>
                                {$end_title}
                            </h2>
                        </div>
                        <h4>
                            {$home_title_en}
                        </h4>

                    </div>
                </div>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-lg-9">
                <div class="row">

                    {volist name='circle_config' id='item' key="key"}
                    <div class="col-lg-4 col-sm-6">
                        <div class="skill_item wow fadeInUp" data-wow-delay="0.{$key + 3}s">
                            <div class="count_main">
                                <div class="circle{$key}" data-va="{$item.ratio_value}">
                                    <div class="counter_content">
                                        {$item.title}
                                    </div>
                                </div>
                            </div>
                            <p>
                                {$item.desc}
                            </p>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="col-lg-3" style="display: flex;
           justify-content: center;
           align-items: center;">
                <div class="phone_mockup_two text-center wow fadeInLeft">
                    <img class="phone_one" src="{$home_bg_up_img}" alt="" />
                </div>
            </div>

        </div>
    </div>
</section>
<!-- 介绍 -->
<!--作品-->
<section class="portfolio_area_two sec_paded parallax_effect" data-background='{$device_img}' style="background: url({$device_img}) no-repeat
  center center / cover;">
    <div class="container">
        <div class="section_title text-center wow fadeInUp">
            <h6>Our Device</h6>
            <h2>我们的设备</h2>
        </div>
        <div class="row portfolio_inner_four">
            {volist name='device' id='item' key="key"}

            <div class="col-sm-6">
                <div class="pr_slider_item wow fadeInUp" data-wow-delay="0.{$key + 3}s">
                    <div class="img img_hover">
                        <img src="{$item.url}" alt="{$item.title}" />
                        <a href="" class="icon popup"><i class="fas fa-plus"></i></a>
                    </div>
                    <div class="item_content">
                        <a href="#">
                            <h4>{$item.title}</h4>
                        </a>
                        <p>{$item.subtitle}</p>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</section>
<!--作品-->
<!-- 客户评价 -->
<section class="testimonial_area_four sec_paded parallax_effect" data-background='{$testimonials_img}' style="
background: url({$testimonials_img}) no-repeat
  center center / cover;
">
    <div class="overlay_bg"></div>
    <div class="container">
        <div class="section_title text-center color_w2 wow fadeInUp">
            <h6>Clients Say Testimonials</h6>
            <h2>客户评价</h2>
        </div>


        <div class="testimonial_slider">
            {volist name='testimonial_slider' id='item' key="key"}
            <div class="item">
                <div class="testimonial_content">
                    <!-- <i class="fas fa-quote-right icon"></i> -->
                    <p>
                        {$item['desc']}
                    </p>
                </div>
            </div>
            {/volist}


        </div>
        <div class="testimonial_thumbnil">
            {volist name='testimonial_thumbnil' id='item' key="key"}
            <div class="item">
                <div class="round_img">
                    <img src="{$item.url}" alt="" />
                </div>
                <div class="content">
                    <h6>{$item.title}</h6>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</section>
<!-- 客户评价-->
<!-- 案例 -->
<section class="team_area sec_paded parallax_effect" data-background='{$case_img}' style="
    background: url({$case_img}) no-repeat
      center center / cover;">
    <div class="container">
        <div class="section_title text-center wow fadeInUp">
            <h6>Cases</h6>
            <h2>精彩案例</h2>
        </div>
        <div class="row">
            {volist name='case' id='item' key="key"}
            <div class="col-lg-4 col-sm-6">
                <div class="team_item wow fadeInUp" data-wow-delay="0.{$key}s">
                    <div class="img img_hover caseImg">
                        <img src="{$item.url}" alt="{$item.title}" />
                        <a href="" class="icon popup"><i class="fas fa-plus"></i></a>
                    </div>
                    <div class="tema_content">
                        <a href="#">
                            <h6>{$item.title}</h6>
                        </a>
                        <p>{$item.subtitle}</p>
                    </div>

                </div>
            </div>
            {/volist}
        </div>
    </div>
</section>
<!-- 案例 -->
<!--联系我们-->
<section class="h_contact_area parallax_effect sec_paded" data-background="{$home_contact_img}" style="
     background: url({$home_contact_img}) no-repeat center
       center / cover;
   ">
    <div class="overlay_bg"></div>
    <div class="container">
        <div class="section_title text-center color_w wow fadeInUp" data-wow-delay="0.2s">
            <h6 class="wow fadeInUp">Get in Touch</h6>
            <h2 class="wow fadeInUp" data-wow-delay="0.2s">联系我们</h2>
        </div>

        <form id="contactForm" class="row h_contact_form">
            <div class="col-lg-4 col-md-6 form-group">
                <input class="form-control" type="text" id="name" name="name" placeholder="名字" />
                <div class="error-msg" data-for="name"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group">
                <input class="form-control" type="email" id="email" name="email" placeholder="邮箱" />
                <div class="error-msg" data-for="email"></div>
            </div>
            <div class="col-lg-4 col-md-12 form-group">
                <input class="form-control" type="text" id="phone" name="phone" placeholder="电话" />
                <div class="error-msg" data-for="phone"></div>
            </div>
            <div class="col-lg-12 form-group">
                <textarea class="form-control" name="message" id="message" cols="30" rows="10"
                    placeholder="留言"></textarea>
                <div class="error-msg" data-for="message"></div>
            </div>
            <div class="col-lg-12 text-right form-group">
                <button type="submit" class="theme_btn">
                    发送
                </button>
            </div>
        </form>
        <div id="success">您的消息已成功发送！</div>
        <div id="error">哎呀！系统错误，请重试</div>
    </div>
</section>
<!--联系我们-->
{/block}

{block name="script"}
<script src="assets/js/home.js"></script>
{/block}